<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交圈 - 喝水小管家</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f8fafc;
        }
        .status-bar {
            background-color: #000;
            color: white;
            padding: 5px 15px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
        }
        .nav-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-top: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #64748b;
            font-size: 10px;
        }
        .nav-item.active {
            color: #3b82f6;
        }
        .nav-icon {
            font-size: 22px;
            margin-bottom: 3px;
        }
        .tab-btn {
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            transition: all 0.2s;
        }
        .tab-btn.active {
            background-color: #3b82f6;
            color: white;
        }
        .ranking-card {
            position: relative;
            overflow: hidden;
        }
        .ranking-badge {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-weight: bold;
            font-size: 12px;
        }
        .rank-1 {
            background-color: #ffd700;
            color: white;
        }
        .rank-2 {
            background-color: #c0c0c0;
            color: white;
        }
        .rank-3 {
            background-color: #cd7f32;
            color: white;
        }
        .rank-other {
            background-color: #e5e7eb;
            color: #4b5563;
        }
        .progress-bar {
            height: 6px;
            background-color: #e2e8f0;
            border-radius: 3px;
            overflow: hidden;
        }
        .progress-fill {
            height: 100%;
            background-color: #3b82f6;
            border-radius: 3px;
        }
        .post-card {
            background-color: white;
            border-radius: 16px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 16px;
            overflow: hidden;
        }
        .post-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .action-btn {
            display: flex;
            align-items: center;
            color: #64748b;
            font-size: 14px;
        }
        .action-btn i {
            margin-right: 5px;
        }
        .share-card {
            background: linear-gradient(145deg, #42a1ec, #0070c9);
            border-radius: 16px;
            color: white;
            position: relative;
            overflow: hidden;
        }
        .share-badge {
            position: absolute;
            right: -15px;
            top: -15px;
            background-color: rgba(255, 255, 255, 0.2);
            width: 120px;
            height: 120px;
            border-radius: 60px;
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="status-bar">
        <span>9:41</span>
        <div>
            <span class="mr-1"><i class="fas fa-signal"></i></span>
            <span class="mr-1"><i class="fas fa-wifi"></i></span>
            <span><i class="fas fa-battery-full"></i></span>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="px-4 pt-3 pb-20">
        <!-- 顶部标题 -->
        <div class="flex justify-between items-center py-2">
            <h1 class="text-xl font-bold text-gray-800">社交圈</h1>
            <button class="bg-blue-100 text-blue-500 w-8 h-8 rounded-full flex items-center justify-center">
                <i class="fas fa-user-plus"></i>
            </button>
        </div>
        
        <!-- 选项卡 -->
        <div class="flex space-x-2 mt-3 overflow-x-auto pb-2">
            <button class="tab-btn active">排行榜</button>
            <button class="tab-btn">动态</button>
            <button class="tab-btn">好友</button>
            <button class="tab-btn">话题</button>
        </div>
        
        <!-- 排行榜卡片 -->
        <div class="bg-white rounded-2xl shadow-sm p-4 mt-4">
            <div class="flex justify-between items-center mb-4">
                <h3 class="font-semibold text-gray-800">本周饮水排行榜</h3>
                <div class="flex items-center text-xs text-gray-500">
                    <span>更新于</span>
                    <span class="ml-1">今天 09:32</span>
                </div>
            </div>
            
            <!-- 前三名 -->
            <div class="flex justify-between mb-6">
                <!-- 第二名 -->
                <div class="flex flex-col items-center">
                    <div class="relative w-14 h-14 mb-3">
                        <div class="w-14 h-14 rounded-full bg-cover bg-center border-2 border-gray-200" style="background-image: url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80')"></div>
                        <div class="absolute -bottom-1 -right-1 rank-2 ranking-badge">2</div>
                    </div>
                    <span class="text-xs font-medium text-gray-800">小红</span>
                    <span class="text-xs text-gray-500">1.8L</span>
                </div>
                
                <!-- 第一名 -->
                <div class="flex flex-col items-center">
                    <div class="relative w-18 h-18 mb-3">
                        <div class="w-18 h-18 rounded-full bg-cover bg-center border-2 border-blue-200" style="background-image: url('https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80')"></div>
                        <div class="absolute -bottom-1 -right-1 rank-1 ranking-badge">1</div>
                    </div>
                    <span class="text-xs font-medium text-gray-800">小芳</span>
                    <span class="text-xs text-gray-500">2.2L</span>
                </div>
                
                <!-- 第三名 -->
                <div class="flex flex-col items-center">
                    <div class="relative w-14 h-14 mb-3">
                        <div class="w-14 h-14 rounded-full bg-cover bg-center border-2 border-gray-200" style="background-image: url('https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80')"></div>
                        <div class="absolute -bottom-1 -right-1 rank-3 ranking-badge">3</div>
                    </div>
                    <span class="text-xs font-medium text-gray-800">小李</span>
                    <span class="text-xs text-gray-500">1.7L</span>
                </div>
            </div>
            
            <!-- 其他排名 -->
            <div class="space-y-4">
                <!-- 自己的排名 -->
                <div class="flex items-center bg-blue-50 p-3 rounded-lg">
                    <div class="rank-other ranking-badge mr-3">4</div>
                    <div class="flex-1">
                        <div class="flex justify-between items-center mb-1">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-cover bg-center mr-2" style="background-image: url('https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80')"></div>
                                <div>
                                    <span class="text-sm font-medium text-gray-800">小明 (我)</span>
                                </div>
                            </div>
                            <span class="text-sm font-medium text-blue-500">1.4L</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 70%;"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 其他人排名 -->
                <div class="flex items-center p-3 rounded-lg">
                    <div class="rank-other ranking-badge mr-3">5</div>
                    <div class="flex-1">
                        <div class="flex justify-between items-center mb-1">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-cover bg-center mr-2" style="background-image: url('https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80')"></div>
                                <div>
                                    <span class="text-sm font-medium text-gray-800">小张</span>
                                </div>
                            </div>
                            <span class="text-sm font-medium text-gray-800">1.2L</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 60%;"></div>
                        </div>
                    </div>
                </div>
                
                <div class="flex items-center p-3 rounded-lg">
                    <div class="rank-other ranking-badge mr-3">6</div>
                    <div class="flex-1">
                        <div class="flex justify-between items-center mb-1">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-cover bg-center mr-2" style="background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80')"></div>
                                <div>
                                    <span class="text-sm font-medium text-gray-800">小王</span>
                                </div>
                            </div>
                            <span class="text-sm font-medium text-gray-800">1.0L</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 50%;"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <button class="w-full text-blue-500 text-sm font-medium mt-4">查看完整排行 ></button>
        </div>
        
        <!-- 分享卡片 -->
        <div class="share-card p-5 mt-6">
            <div class="share-badge"></div>
            <div class="relative z-10">
                <h3 class="font-semibold text-lg mb-2">分享你的健康饮水习惯</h3>
                <p class="text-sm text-blue-100 mb-4">向好友展示你的饮水成就，鼓励他们一起养成健康饮水习惯</p>
                <div class="flex space-x-3">
                    <button class="bg-white text-blue-500 px-4 py-2 rounded-lg text-sm font-medium">分享达标</button>
                    <button class="bg-white bg-opacity-20 text-white px-4 py-2 rounded-lg text-sm font-medium">发布动态</button>
                </div>
            </div>
        </div>
        
        <!-- 好友动态 -->
        <div class="mt-6">
            <h3 class="font-semibold text-lg text-gray-800 mb-3">好友动态</h3>
            
            <!-- 动态列表 -->
            <div class="post-card">
                <div class="p-4">
                    <div class="flex items-center mb-3">
                        <div class="w-10 h-10 rounded-full bg-cover bg-center mr-3" style="background-image: url('https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80')"></div>
                        <div>
                            <div class="text-sm font-medium text-gray-800">小芳</div>
                            <div class="text-xs text-gray-500">2小时前</div>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-3">今天天气真热，记得多喝水哦！我今天的目标已经完成了80%，继续加油！💪</p>
                    <img src="https://images.unsplash.com/photo-1523362628745-0c100150b504?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="动态图片" class="rounded-lg post-image mb-3">
                    <div class="flex justify-between">
                        <button class="action-btn">
                            <i class="far fa-heart"></i>
                            <span>128</span>
                        </button>
                        <button class="action-btn">
                            <i class="far fa-comment"></i>
                            <span>36</span>
                        </button>
                        <button class="action-btn">
                            <i class="far fa-share-square"></i>
                            <span>分享</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="post-card">
                <div class="p-4">
                    <div class="flex items-center mb-3">
                        <div class="w-10 h-10 rounded-full bg-cover bg-center mr-3" style="background-image: url('https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80')"></div>
                        <div>
                            <div class="text-sm font-medium text-gray-800">小李</div>
                            <div class="text-xs text-gray-500">昨天 19:42</div>
                        </div>
                    </div>
                    <p class="text-gray-700 mb-3">连续坚持饮水打卡15天了，感觉皮肤状态好了很多，推荐大家都养成按时喝水的好习惯~</p>
                    <div class="flex justify-between">
                        <button class="action-btn">
                            <i class="far fa-heart"></i>
                            <span>86</span>
                        </button>
                        <button class="action-btn">
                            <i class="far fa-comment"></i>
                            <span>12</span>
                        </button>
                        <button class="action-btn">
                            <i class="far fa-share-square"></i>
                            <span>分享</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="nav-bar">
        <div class="nav-item">
            <div class="nav-icon"><i class="fas fa-home"></i></div>
            <span>首页</span>
        </div>
        <div class="nav-item">
            <div class="nav-icon"><i class="fas fa-list"></i></div>
            <span>记录</span>
        </div>
        <div class="nav-item">
            <div class="nav-icon"><i class="fas fa-chart-bar"></i></div>
            <span>统计</span>
        </div>
        <div class="nav-item active">
            <div class="nav-icon"><i class="fas fa-user"></i></div>
            <span>我的</span>
        </div>
    </div>
</body>
</html> 